<template>
  <div class="admin-container">
    <h1>课程发布申请审核</h1>
    <table v-if="pendingRequests.length > 0">
      <thead>
      <tr>
        <th>课程编号</th>
        <th>课程名称</th>
        <th>名额</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(request, index) in pendingRequests" :key="index">
        <td>{{ request.cno }}</td>
        <td>{{ request.cname }}</td>
        <td>{{ request.residue }}</td>
        <td>{{ getStatusText(request.isopen) }}</td>
        <td>
            <span v-if="!request.approving && !request.rejecting">
              <button @click="prepareApproveCourse(request)">批准</button>
              <button @click="prepareRejectCourse(request)">拒绝</button>
            </span>
          <span v-else>
              <template v-if="request.approving">
                <button @click="confirmApproveCourse(request)">确认批准</button>
                <button @click="cancelApproveCourse(request)">取消</button>
              </template>
              <template v-else-if="request.rejecting">
                <button @click="confirmRejectCourse(request)">确认拒绝</button>
                <button @click="cancelRejectCourse(request)">取消</button>
              </template>
            </span>
        </td>
      </tr>
      </tbody>
    </table>
    <p v-else>暂无待审核的课程申请。</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const pendingRequests = ref([]);

// 获取待审核的课程申请
const fetchPendingRequests = async () => {
  try {
    const response = await axios.get('http://localhost:8080/admin/pending');
    pendingRequests.value = response.data.filter(course => course.apply === 1);
  } catch (error) {
    console.error('获取待审核的申请失败:', error);
  }
};

// 准备审核通过课程（设置approving标志）
const prepareApproveCourse = (course) => {
  course.approving = true;
  course.rejecting = false; // 确保只有一种操作处于活动状态
};

// 确认审核通过课程
const confirmApproveCourse = async (course) => {
  try {
    await axios.put('http://localhost:8080/admin/approve', {
      tno: course.tno,
      apply: 0,
      isopen: 1,
      cname: course.cname
    });
    course.isopen = 1;
    course.apply = 0;
    course.approving = false;
    alert('课程已批准');
  } catch (error) {
    console.error('批准课程失败:', error);
    alert('批准课程失败，请稍后再试');
    course.approving = false; // 如果失败也要确保回到初始状态
  }
};

// 取消审核通过课程（重置approving标志）
const cancelApproveCourse = (course) => {
  course.approving = false;
};

// 准备拒绝课程申请（设置rejecting标志）
const prepareRejectCourse = (course) => {
  course.rejecting = true;
  course.approving = false; // 确保只有一种操作处于活动状态
};

// 确认拒绝课程申请
const confirmRejectCourse = async (course) => {
  try {
    await axios.put('http://localhost:8080/admin/reject', {
      tno: '',
      apply: 0,
      isopen: 3,
      cname: course.cname
    });
    course.isopen = 3;
    course.apply = 0;
    course.tno = '';
    course.rejecting = false;
    alert('课程申请已拒绝');
  } catch (error) {
    console.error('拒绝课程失败:', error);
    alert('拒绝课程失败，请稍后再试');
    course.rejecting = false; // 如果失败也要确保回到初始状态
  }
};

// 取消拒绝课程申请（重置rejecting标志）
const cancelRejectCourse = (course) => {
  course.rejecting = false;
};

// 根据isopen值返回状态文本
const getStatusText = (isopen) => {
  switch (isopen) {
    case 0:
      return '待审查';
    case 1:
      return '已批准';
    case 3:
      return '已拒绝';
    default:
      return '未知状态';
  }
};

onMounted(() => {
  fetchPendingRequests();
});
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f1f1f1;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}

button.reject {
  background-color: #d9534f;
}

button:disabled {
  background-color: gray;
}
</style>
